import React, { useEffect, useState } from 'react';
import { Icon } from 'rmc-kiana-mei';
import { DemoBlock } from 'rmc-kiana-mei/src/demos';
import { IconType } from '../index';
import './index.scss';

export default () => {
  // 特殊图标loading状态
  const [state, setState] = useState<{
    state1: IconType;
    state2: IconType;
  }>({
    state1: 'loading',
    state2: 'loading',
  });

  useEffect(() => {
    setTimeout(() => {
      setState({
        state1: 'failed',
        state2: 'success',
      });
    }, 1500);
  }, []);

  // 特殊图标showHide
  const [showHide, setShowHide] = useState<boolean>(false);

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: getStyles() }}></style>
      <DemoBlock title="icon总览">
        <ul className="wrapper">
          <li>
            <Icon type="loading" />
          </li>
          <li>
            <Icon type="close" />
          </li>
          <li>
            <Icon type="failed" />
          </li>
          <li>
            <Icon type="search" />
          </li>
          <li>
            <Icon type="success" />
          </li>
        </ul>
      </DemoBlock>
      <DemoBlock title="特殊图标 loading">
        <ul className="wrapper">
          <li>
            <Icon
              type="loading"
              state={state.state1}
              style={{
                width: '.22rem',
                height: '.22rem',
              }}
              onClick={() => alert('点击成功')}
            />
          </li>
          <li>
            <Icon
              type="loading"
              state={state.state2}
              style={{
                width: '.22rem',
                height: '.22rem',
              }}
              onClick={() => alert('点击成功')}
            />
          </li>
        </ul>
      </DemoBlock>
      <DemoBlock title="特殊图标showHide">
        <ul className="wrapper">
          <li>
            <Icon
              type="showHide"
              trigger={showHide}
              onClick={() => setShowHide(prevProps => !prevProps)}
            />
          </li>
        </ul>
      </DemoBlock>
    </>
  );
};

const getStyles = () => ``;
